<!-- 用户在todo.jsp页面：

可以输入新事项标题并提交添加；

可以点击“完成”或“删除”按钮操作现有事项。

表单提交给 TodoServlet：

Servlet 根据 action 参数判断操作类型（添加、完成、删除）；

操作 session 中保存的事项列表；

设置操作成功或失败的消息。

操作完成后，Servlet重定向回 todo.jsp：

页面读取 session 中的事项列表和消息，展示最新数据和提示。 -->
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<meta charset="UTF-8">
<%@ page import="java.util.*, bean.TodoItem" %>
<html>
<head>
    <title>待办事项列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .message {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }

        .error {
            background-color: #ffebee;
            color: #c62828;
        }

        .success {
            background-color: #e8f5e9;
            color: #2e7d32;
        }

        form {
            margin: 10px 0;
        }

        input[type="text"] {
            padding: 8px;
            width: 300px;
        }

        button {
            padding: 8px 15px;
            margin: 0 5px;
            cursor: pointer;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            padding: 10px;
            margin: 5px 0;
            background: #f5f5f5;
            border-radius: 4px;
        }

        .completed {
            text-decoration: line-through;
            color: #666;
        }

        .todo-actions {
            display: inline-block;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<h2>📝 我的待办事项</h2>

<%
    String error = (String) session.getAttribute("error");
    String message = (String) session.getAttribute("message");
    if (error != null) {
%>
<div class="message error"><%= error %>
</div>
<%
        session.removeAttribute("error");
    }
    if (message != null) {
%>
<div class="message success"><%= message %>
</div>
<%
        session.removeAttribute("message");
    }
%>

<!-- 添加新事项表单 -->
<form action="TodoServlet" method="post">
    <input type="text" name="title" placeholder="添加新事项..." required/>
    <input type="hidden" name="action" value="add"/>
    <button type="submit">添加</button>
</form>

<hr>

<%
    List<TodoItem> todoList = (List<TodoItem>) session.getAttribute("todos");
    if (todoList == null || todoList.size() == 0) {
%>
<p>暂无待办事项</p>
<%
} else {
%>
<ul>
    <% for (TodoItem item : todoList) { %>
    <li class="<%= "已完成".equals(item.getStatus()) ? "completed" : "" %>">
        <span class="todo-title"><strong><%= item.getTitle() %></strong> - <%= item.getStatus() %></span>
        <div class="todo-actions">
            <% if (!"已完成".equals(item.getStatus())) { %>
            <form action="TodoServlet" method="post" style="display: inline;">
                <input type="hidden" name="action" value="complete"/>
                <input type="hidden" name="itemTitle" value="<%= item.getTitle() %>"/>
                <button type="submit">完成</button>
            </form>
            <% } %>
            <form action="TodoServlet" method="post" style="display: inline;">
                <input type="hidden" name="action" value="delete"/>
                <input type="hidden" name="itemTitle" value="<%= item.getTitle() %>"/>
                <button type="submit">删除</button>
            </form>
        </div>
    </li>
    <% } %>
</ul>
<% } %>

</body>
</html>